<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="assets/css/amazeui.css"/>
    <link href="css/dlstyle.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="js/sweetalert/sweetalert.css" rel="stylesheet"/>
    <script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/sweetalert/sweetalert.min.js"></script>
</head>

<body>
<!--这里是页面的logo类型的banner-->
<!--<div class="login-boxtitle">
    <a href="/"><img alt="logo" src=""/></a>
</div>-->

<div class="login-banner">
    <div class="login-main">
        <div class="login-banner-bg"><span></span><img src="images/big.jpg"/></div>
        <div class="login-box">

            <h3 class="title">登录商城</h3>

            <div class="clear"></div>

            <div class="login-form">
                <form action="/login" method="post" id="loginForm">
                    <div class="user-name">
                        <label for="user"><i class="am-icon-user"></i></label>
                        <input type="text" name="loginName" id="loginName" placeholder="手机">
                    </div>
                    <div class="user-pass">
                        <label for="password"><i class="am-icon-lock"></i></label>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="verification">
                        <label for="code"><i class="am-icon-code-fork"></i></label>
                        <input style="width: 50%;" type="text" name="validateCode" id="validateCode"
                               placeholder="请输入验证码">
                        <img id="captchaImage" style="margin-left:25px;width:40%;height:42px;position:absolute;" alt="单击图片刷新！"
                             src="/captcha/captchaImage"
                             onclick="this.src='/captcha/captchaImage?d='+new Date()*1">
                    </div>
                </form>
            </div>

            <div class="login-links">
<!--                <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>-->
<!--                <a href="#" class="am-fr">忘记密码</a>-->
                <a href="/register" class="zcnext am-fr am-btn-default">注册</a>
                <br/>
            </div>
            <div class="am-cf">
                <input type="submit" onclick="login()" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm">
            </div>

        </div>
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>
</body>
<script type="text/javascript">
    function login() {
        var loginName = $("#loginName").val();
        if (!validPhoneNumber(loginName)) {
            swal('请输入正确的登录名(即手机号)', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        //把form表单里的数据进行序列化生成json数据
        var params = $("#loginForm").serialize();
        var url = '/login';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.resultCode == 200) {
                    window.location.href = '/';
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                    $("#captchaImage").click();
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

</script>
</html>